<template>
  <el-card v-if="question.type === '6'" class="box-card">
    <div slot="header" class="clearfix">
      <el-row :gutter="20">
        <el-col :span="20" class="cardHeader">
          <span>
            子题目
            <span>(注*支持拖拽排序)</span>
          </span>
        </el-col>
        <el-col :span="4" class="cardHeader">
          <el-button v-if="!readonly && question.id" type="primary" size="mini"
            @click="$emit('add-sub-question')">添加子题目</el-button>
        </el-col>
      </el-row>
    </div>
    <draggable :disabled="readonly" v-model="sonQuestions" @update="$emit('update-sort-question')">
      <el-card v-for="(sonQuestion, index) in sonQuestions" :key="sonQuestion.id" class="questionItem">
        <el-row>
          <el-col :span="1">题目:</el-col>
          <el-col :span="1">{{ index + 1 }}</el-col>
          <el-col :span="1" class="fg">|</el-col>
          <el-col :span="10">
            <span class="questionTitle" v-html="sonQuestion.title" />
          </el-col>
          <el-col :span="2">
            <el-tag effect="dark" size="mini">{{ questionType[sonQuestion.type] }}</el-tag>
          </el-col>
          <el-col :span="1" class="fg">|</el-col>
          <el-col :span="2">
            <el-tag :type="getStatusTagType(sonQuestion)" size="mini">{{ getStatusText(sonQuestion) }}</el-tag>
          </el-col>
          <el-col v-if="!readonly" :span="1" class="fg">|</el-col>
          <el-col v-if="!readonly" :span="2">
            <el-link icon="el-icon-edit" @click="$emit('edit-sub-question', sonQuestion.id)">编辑</el-link>
          </el-col>
          <el-col v-if="!readonly" :span="1" class="fg">|</el-col>
          <el-col v-if="!readonly" :span="2">
            <el-link icon="el-icon-delete" type="danger" @click="$emit('delete-sub-question', sonQuestion.id)">删除</el-link>
          </el-col>
        </el-row>
      </el-card>
    </draggable>
  </el-card>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "SubQuestionManager",
  components: {
    draggable
  },
  props: {
    question: {
      type: Object,
      required: true
    },
    sonQuestions: {
      type: Array,
      default: () => []
    },
    readonly: {
      type: Boolean,
      default: false
    },
    questionType: {
      type: Object,
      default: () => ({
        1: "单选题",
        2: "多选题",
        3: "判断题",
        4: "填空",
        5: "简答题",
        6: "材料题",
        7: "连线题",
      })
    }
  },
  methods: {
    getStatusTagType(row) {
      if (row.onlineStatus === 1) {
        return "success";
      }
      return "";
    },
    getStatusText(row) {
      if (row.onlineStatus === 1) {
        return "上线";
      }
      if (row.status === 0) {
        return "编辑中";
      }
      if (row.status == 3) {
        return "校验中";
      }
      if (row.status == 4) {
        return "审核中";
      }
      if (row.status == 5) {
        return "已审核";
      }
      return "下线";
    }
  }
};
</script>

<style scoped>
.questionItem {
  margin-top: 5px;
}

.questionItem .el-card__body {
  padding: 12px;
}

.questionTitle p {
  margin: 0px;
}

.fg {
  text-align: center;
  color: #ccc;
}

.cardHeader {
  display: flex;
  align-items: center;
}
</style>